<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/repairs/statistic' }">查询统计</el-breadcrumb-item>
                <el-breadcrumb-item>查询统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
            <div class="main-filters">
            <el-form :inline="true">
                 <el-form-item>
                    <el-radio-group v-model="query.statistic_type">
                        <el-radio-button
                            v-for="(item, id) in statistic_types"
                            :label="item"
                        >{{item}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
            <div class="main-actions-btns">
                <el-button @click="exportData">导出报表</el-button>
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column width="150" label="部门名称/维修员" inline-template>
                <div>
                    <span>{{ query.statistic_type ==='部门维修统计' ? row.department.name : row.repairer.name }}</span>
                </div>
            </el-table-column>
            <el-table-column prop="num" label="状态" inline-template>
                 <div>
                   <el-tag :type="statusAlias[row.status].icon">{{statusAlias[row.status].name}}</el-tag>
                </div>
            </el-table-column>
             <el-table-column prop="num" label="数量" inline-template>
                 <div>
                  {{row.count}}
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
import ListController from '../controllers/list';

import Repair from '../models/repair';
import Department from '../models/department';
import User from '../models/user';
import department from '../models/department';


export default new ListController({
    data() {
        return {
            ListModel: Repair,

            query: {
                page_num: 1,
                page_size: 20,
                department_id: 0,
                statistic_type: '部门维修统计',
                sort: ''
            },
            top: 0,
            statistic_types: ['部门维修统计', '工程师工单统计'],
            statusMap: {
                PENDING: Repair.PENDING,
                ALLOCATED: Repair.ALLOCATED,
                REPAIRED: Repair.REPAIRED,
                COMPLETED: Repair.COMPLETED
            },
            statusAlias: {
                [Repair.PENDING]: {
                    icon: 'warning',
                    name: '待分配'
                },
                [Repair.ALLOCATED]: {
                    icon: 'success',
                    name: '已分配'
                },
                [Repair.REPAIRED]: {
                    icon: 'gray',
                    name: '已维修'
                },
                [Repair.COMPLETED]: {
                    icon: 'success',
                    name: '已完成'
                }
            },
            departments: [],
            // statusMap: {
            //     PENDING: TempletModel.PENDING,
            //     ONLINE: TempletModel.ONLINE,
            //     OFFLINE: TempletModel.OFFLINE,
            //     REJECTED: TempletModel.REJECTED
            // },
            // statusAlias: {
            //     [TempletModel.PENDING]: {
            //         icon: 'warning',
            //         name: '待审核'
            //     },
            //     [TempletModel.ONLINE]: {
            //         icon: 'success',
            //         name: '已上架'
            //     },
            //     [TempletModel.OFFLINE]: {
            //         icon: 'gray',
            //         name: '已下架'
            //     },
            //     [TempletModel.REJECTED]: {
            //         icon: 'danger',
            //         name: '未通过'
            //     }
            // },
        };
    },
    methods: {
        beforeLoadItems() {
            return Promise.all([
            ]);
        },
        exportData() {
            window.location = '/ticket/export';
        },
        afterLoadItems() {
            console.log(this.itemsData.items);
        },
        loadDepartments() {
            return Department.where({

            })
            .$promise
            .then(departments => {
                this.departments = departments.items;
            });
        },
        loadUsers() {

        }
    },
    // watch: {
    //     'query': {
    //         deep: true,
    //         handler: function() {
    //             if(this.query.statistic_type === '部门维修统计') {
    //                 return Department.query()
    //                 .$promise
    //                 .then(departments => {
    //                     this.itemsData.items = departments.itemss;
    //                 })
    //             }
    //             if(this.query.statistic_type === '工程师工单统计') {
    //                 return User.query()
    //                 .$promise
    //                 .then(users => {
    //                     this.itemsData.items = users.itemss;
    //                 })
    //             }
    //         }
    //     }
    // }
});
</script>
